<template>
  <div>
    <div class="tab_warp">
      <tab
        :line-width="1"
        v-model="tabIndex"
        active-color="#E83263"
        custom-bar-width="40px"
        default-color="#333"
      >
        <tab-item @on-item-click="vipBtn">普通会员</tab-item>
        <tab-item @on-item-click="svipBtn">SVIP</tab-item>
      </tab>
    </div>
    <div class="tit_wrap">
      <div>充值VIP</div>
      <div style="font-size:12px;" v-if="tabIndex==0&&isVip">{{userInfo.commonVipMaturity}} 到期</div>
      <div style="font-size:12px;" v-if="tabIndex==1&&isSvip">{{userInfo.superVipMaturity}} 到期</div>
    </div>
    <div class="checker_warp" v-if="tabIndex==0">
      <div
        @click="chooseMoney(index)"
        class="check_default"
        :class="{'checked':moneyCheckedIndex==index}"
        :key="index"
        v-for="(item,index) in moneyList"
      >
        <div value="index">
          <div class="glod_color">￥{{item.vipMoneyName}}({{item.vipGoldName}}Q豆)</div>
          <div>
            {{item.vipName}}
            <span v-if="item.vipTime=='minute'">分钟体验卡</span>
            <span v-if="item.vipTime=='hour '">时</span>
            <span v-if="item.vipTime=='day'">天</span>
            <span v-if="item.vipTime=='month'">月</span>
          </div>
        </div>
      </div>
    </div>
    <div class="checker_warp" v-else>
      <div
        @click="chooseMoney(index)"
        class="check_default"
        :class="{'checked':moneyCheckedIndex==index}"
        :key="index"
        v-for="(item,index) in moneySvipList"
      >
        <div value="index">
          <div class="glod_color">￥{{item.vipMoneyName}}({{item.vipGoldName}}Q豆)</div>
          <div>
            {{item.vipName}}
            <span v-if="item.vipTime=='minute'">分钟体验卡</span>
            <span v-if="item.vipTime=='hour '">时</span>
            <span v-if="item.vipTime=='day'">天</span>
            <span v-if="item.vipTime=='month'">月</span>
          </div>
        </div>
      </div>
    </div>
    <div class="subBtn" @click="payOrders">立即开通</div>
    <div class="subBtn" @click="myGoldMember">Q豆开通（当前Q豆：{{userInfo.userGoldBalance}}）</div>
  </div>
</template>
<script>
import { Tab, TabItem, Checker, CheckerItem } from "vux";
import * as API from "@/http/common/api";
export default {
  name: "openVip",
  data() {
    return {
      tabIndex: 0, //头部 tab 0/1
      moneyCheckedIndex: 0, //钱类型check
      userInfo: {},
      moneyList: [],
      moneySvipList: [],
      code: null
    };
  },
  methods: {
    goChat() {
      this.$router.push({ name: "Talking", params: {} });
    },
    vipBtn() {},
    svipBtn() {},
    chooseMoney(e) {
      this.moneyCheckedIndex = e;
    },
    // 获取VIP SVIP list
    getGlodList(e) {
      this.$http(API.getVIPList, {
        type: "GET",
        params: {
          vipParam: e
        }
      })
        .then(res => {
          if (res.data.code == 0) {
            if (e == "vip") {
              this.moneyList = res.data.list;
            } else {
              this.moneySvipList = res.data.list;
            }
          } else {
            this.$vux.toast.show({
              text: res.data.message,
              type: "text"
            });
          }
        })
        .catch(err => {
          this.$vux.loading.hide();
          this.$vux.toast.show({ text: "网络错误，请重试", type: "text" });
        });
    },
    // 充值
    payOrders() {
      this.$http(API.getPrepayId, {
        type: "POST",
        params: {
          openId: this.$localStorage.get("openId"),
          moneyType:
            this.tabIndex == 0
              ? this.moneyList[this.moneyCheckedIndex].vipMoneyName
              : this.moneySvipList[this.moneyCheckedIndex].vipMoneyName,
          spbillCreateIp: returnCitySN["cip"],
          userId: this.userInfo.userId,
          payType: this.tabIndex == 0 ? 2 : 3 //单独充值1   开通vip 2   开通svip3
        }
      }).then(res => {
        if (res.data.code == 0) {
          wx.config({
            debug: false, // 开启调试模式
            appId: "wx554b0a1adc8cc19c", // 公众号的唯一标识
            timestamp: res.data.message.timeStamp, // 生成签名的时间戳
            nonceStr: res.data.message.nonceStr, // 生成签名的随机串
            signature: res.data.message.paySign, // 签名
            jsApiList: ["chooseWXPay"] // 填入需要使用的JS接口列表，这里是先声明我们要用到支付的JS接口
          });

          //弹出支付窗口
          wx.chooseWXPay({
            timestamp: res.data.message.timeStamp, // 支付签名时间戳，
            nonceStr: res.data.message.nonceStr, // 支付签名随机串，不长于 32 位
            package: res.data.message.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=xxxx）
            signType: "MD5", // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
            paySign: res.data.message.paySign, // 支付签名
            success: function(res) {
              // 支付成功后的回调函数
              console.log("支付成功后的回调函数", res);

              this.$http(API.callback, {
                type: "GET",
                params: {}
              }).then(res => {});
            },
            cancel: function(res) {
              console.log("支付取消", res);
            },
            fail: function(res) {
              console.log("支付失败", res);
            }
          });
        } else {
          this.$vux.toast.show({
            text: res.data.msg,
            type: "text"
          });
        }
      });
    },
    // 开通vip
    myGoldMember() {
      if (this.tabIndex == 0) {
        var memberType = "vip";
        var a = this.moneyList[this.moneyCheckedIndex];
        var url =API.GoldOpenVip
      } else {
        var memberType = "svip";
        var a = this.moneySvipList[this.moneyCheckedIndex];
        var url =API.GoldOpenSVip
      }
      if (Number(a.vipGoldName) > this.userInfo.userGoldBalance) {
        this.$vux.toast.show({
          text: "余额不足",
          type: "text"
        });
        return;
      }

      if (a.vipTime == "minute") {
        this.$vux.toast.show({
          text: "参与‘免费拿VIP’活动可领取体验卡",
          type: "text"
        });
        return;
        
      } 
      // else if (a.vipTime == "hour ") {
      //   var vipTimee = a.vipName * 3600;
      // } else if (a.vipTime == "day") {
      //   var vipTimee = a.vipName * 86400;
      // } else if (a.vipTime == "month") {
      //   var vipTimee = a.vipName * 2592000;
      // }
      this.$http(url, {
        type: "POST",
        params: {
          userId: this.userInfo.userId,
          vipType: this.moneyList[this.moneyCheckedIndex].vipGoldName, //开通会员所需的Q豆
        }
      }).then(res => {
        if (res.data.code == 0) {
          this.$vux.toast.show({ text: "开通成功", type: "text" });
          this.getMessage()
        } else {
          this.$vux.toast.show({
            text: res.data.message,
            type: "text"
          });
        }
      });
    },
    getMessage() {
      this.$http(API.myMessage, {
        type: "GET",
        params: {
          userId: this.userInfo.userId
        }
      }).then(res => {
        if (res.data.code == 0) {
          this.userInfo=res.data.Message
        } else {
          this.$vux.toast.show({
            text: res.data.message,
            type: "text"
          });
        }
      });
    },
  },
  mounted() {
    this.userInfo = JSON.parse(this.$localStorage.get("userInfo"));
    this.code = this.$localStorage.get("code");
    this.isVip = this.$localStorage.get("vip");
    this.isSvip = this.$localStorage.get("svip");
    this.getGlodList("vip");
    this.getGlodList("svip");
  },
  components: {
    Tab,
    TabItem,
    Checker,
    CheckerItem
  },
  computed: {
    newMoneyList() {
      return;
    }
  },
  watch: {}
};
</script>
<style  scoped lang='less' >
@import "~vux/src/styles/reset.less";

.tab_warp /deep/ .vux-tab {
  background: #fefefe;
}
.tit_wrap {
  display: flex;
  justify-content: space-between;
  height: 53px;
  background: #fff;
  align-items: center;
  padding: 0 15px;
  font-size: 14px;
  margin-top: 5px;
}
.check_default {
  width: 105px;
  height: 84px;
  border-radius: 5px;
  border: 1px solid #e0e0e0;
  text-align: center;
  font-size: 12px;
  margin: 8px;
}
.checked {
  border: 1px solid #e83263;
  color: #e83263;
  background: rgb(253, 234, 239);
}
.glod_color {
  color: #e83263 !important;
  margin: 15px 0 10px 0;
}
.checker_warp {
  background: #fff;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: 10px;
}
.subBtn {
  margin: 0 auto;
  height: 49px;
  width: 345px;
  line-height: 49px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  border-radius: 1px;
  background: #e83263;
  margin-top: 20px;
}
</style>